<script>
import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
export default {
  name: "inputPopup",
  components: { uniPopup },
  props: {
    value: String,
    title: {
      type: String,
      default: "请输入",
    },
    placeholder: {
      type: String,
      default: "请输入",
    },
    inputType: {
      type: String,
      default: "text",
    },
    paddingBottom: {
      type: String,
      default: "50vh",
    },
    validateMethod: {
      type: Function,
      default: () => {
        return () => true
      },
    },
  },
  data() {
    return {
      localValue: "",
      focus: false,
    }
  },
  methods: {
    open() {
      this.localValue = this.value
      this.$refs.popup.open()
      this.$nextTick(() => {
        this.focus = true
      })
    },
    confirm() {
      if (!this.validateMethod()) return
      this.$emit("input", this.localValue)
      this.$emit("submit")
      this.$refs.popup.close()
    },
  },
  emits: ["submit"],
}
</script>

<template>
  <uni-popup
    ref="popup"
    type="bottom"
    @change="
      (val) => {
        !val.show && (focus = false)
      }
    "
  >
    <view class="content" :style="{ 'padding-bottom': paddingBottom }">
      <view class="header">
        <view class="cancel-btn btn" @click="() => $refs.popup.close()">取消</view>
        <view class="title">{{ title }}</view>
        <view class="confirm-btn btn" @click="confirm">确定</view>
      </view>
      <view class="input-container">
        <input v-model="localValue" :placeholder="placeholder" :focus="focus" :type="inputType" :adjust-position="false"/>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.content {
  background: white;
  padding: {
    top: 28rpx;
    left: 28rpx;
    right: 28rpx;
  }
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
    }
		.btn {
			width: 130rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
		.cancel-btn {
			background: #f5f5f5;
			color: #333333;
		}
    .confirm-btn {
      background: #ffd658;
      color: #333333;
    }
  }
  .input-container {
    margin: 50rpx 0;
    background: var(--gray-background-color);
    padding: 20rpx;
    border-radius: 8rpx;
  }
}
</style>
